<template>
<el-tabs :tab-position="tabPosition" style="height: 440px;">
    <el-tab-pane v-if="this.$store.state.user.roleName === '学生'" label="退班记录" >
      <el-table
      ref="filterTable"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%"
      :default-sort="{prop:'quit_Id',order:'descending'}"
      stripe
      @selection-change="selected"
      max-height="1000"
    >
      <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column prop="userName" sortable label="用户账号" width="100"></el-table-column>
      <el-table-column prop="nickName" label="用户姓名" width="100"></el-table-column>
      <el-table-column sortable v-if="false" prop="quit_Id" label="退班ID" width="150"></el-table-column>
      <el-table-column sortable v-if="false" prop="user_Id" label="用户ID" width="150"></el-table-column>
      <el-table-column prop="originalClass" label="原有班级" width="300"  :show-overflow-tooltip='true'></el-table-column>
      <el-table-column prop="quitStatus" label="退班状态" width="150"></el-table-column>
      <el-table-column prop="quitReason" label="退班原因" width="150"></el-table-column>
      <el-table-column prop="comment" label="备注" width="120"></el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[3,6,8,10,20,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
    </div>
    </el-tab-pane>
    <el-tab-pane label="退班申请">
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="学生姓名"  v-if="this.$store.state.user.roleName === '管理员'">
     <el-select v-model="form.userId" filterable clearable resize placeholder="请选择" style="width: 100%;">
    <el-option
      v-for="item in studentData"
      :key="item.user_Id"
      :label="item.userName+'-'+item.nickName+'-'+item.typeName+'-'+item.className+'-'+item.termName"
      :value="item.user_Id">
      <i class="el-icon-user-solid">{{item.userName+'-'+item.nickName+'-'+item.typeName+'-'+item.className+'-'+item.termName}}</i>
    </el-option>
  </el-select>
  </el-form-item>
   <el-form-item label="学生姓名" v-if="this.$store.state.user.roleName === '学生'">
      <el-input :value="this.$store.state.user.userName+'-'+this.$store.state.user.nickName"></el-input>
  </el-form-item>
  <el-form-item label="原有班级">
    <el-select v-model="form.originalClass" filterable clearable resize placeholder="请选择" style="width: 100%;">
    <el-option
      v-for="item in classData"
      :key="item.classId"
      :label="item.termName+'-'+item.typeName+'-'+item.className"
      :value="item.termName+'-'+item.typeName+'-'+item.className">
      <i class="el-icon-collection">{{item.termName+'-'+item.typeName+'-'+item.className}}</i>
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="退班原因">
    <el-input type="textarea" v-model="form.quitReason" ></el-input>
  </el-form-item>
  <el-form-item label="其他备注">
    <el-input type="textarea" v-model="form.comment" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleAdd">立即申请</el-button>
    <el-button @click="goBack">取消</el-button>
  </el-form-item>
</el-form>
    </el-tab-pane>
</el-tabs>
</template>
<script>
export default {
  inject: ['reload'],
  data () {
    return {
      userId: this.$store.state.user.userId,
      pageSize: 6,
      currentPage: 1,
      tableData: [],
      selectedCheckBox: [],
      tabPosition: 'top', // tab标签位置
      studentData: [],
      classData: [],
      form: {
        userId: '',
        originalClass: '',
        quitReason: '',
        quitStatus: '未批阅',
        comment: ''
      }
    }
  },
  created () {
    this.initData()
    this.getStudentData()
    this.getClassData()
    this.roleSelect()
  },
  methods: {
    selected: function (value) {
      // 复选框获取已经被选择的记录
      this.selectedCheckBox = value
    },
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    roleSelect () {
      if (this.$store.state.user.roleName === '学生') {
        this.form.userId = this.$store.state.user.userId
      }
    },
    goBack () {
      // 点击跳转至上次浏览页面
      if (this.$store.state.user.roleName === '管理员') {
        this.$router.replace('/quitClassManagement')
      } else {
        this.$router.replace('/index')
      }
    },
    handleAdd: function () {
      // 执行添加请假信息方法
      // alert(JSON.stringify(this.form))
      if (this.form != null) {
        this.$axios
          .post('/quits', {
            json: this.form
          })
          .then(response => {
            if (response.data.code === 200) {
              // alert(JSON.stringify(response.data));
              setTimeout(() => {
                // var obj = JSON.parse(JSON.stringify(response.data.data))
                this.$message({
                  message: '申请成功',
                  type: 'success'
                })
                this.getStudentData()
                this.initInsert()
                this.reload()
              }, 300)
            } else {
              this.$message({
                message: '申请失败',
                type: 'warning'
              })
            }
          })
          .catch(function (error) {
            // 请求失败处理
            console.log(error)
          })
      }
    },
    initInsert () {
      this.form.userId = ''
      this.form.originalClass = ''
      this.form.quitReason = ''
      this.form.comment = ''
    },
    getClassData () {
      // 获取班级信息
      this.$axios
        .get('/studentClass/getAllClass')
        .then(response => (this.classData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    getStudentData () {
      // 获取学生信息
      this.$axios
        .get('/leaves/studentInfos')
        .then(response => (this.studentData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    initData () {
      // 初始化数据
      this.$axios
        .post('/quits/quitsClassByUserId', {
          json: this.userId
        })
        .then(response => (this.tableData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    }
  }
}
</script>
